import React from "react";
import { useNavigate, useLocation } from "react-router-dom";
import { Nav } from "@fluentui/react";

const navLinks = [
  { key: "dashboard", name: "Dashboard", url: "/" },
  { key: "users", name: "Users", url: "/users" },
  { key: "tasks", name: "Tasks", url: "/tasks" },
];

function NavBar() {
  const navigate = useNavigate();
  const location = useLocation();
  const pathToKey = {
    '/': 'dashboard',
    '/users': 'users',
    '/tasks': 'tasks',
  };
  const selectedKey = pathToKey[location.pathname] || 'dashboard';

  return (
    <Nav
      groups={[
        {
          links: navLinks.map((link) => ({
            ...link,
            url: undefined,
            href: undefined,
          })),
        },
      ]}
      onLinkClick={(ev, item) => {
        ev?.preventDefault();
        if (item?.key) {
          const target = navLinks.find(l => l.key === item.key);
          if (target?.url) navigate(target.url);
        }
      }}
      selectedKey={selectedKey}
      styles={{ root: { width: 200 } }}
    />
  );
}

export default NavBar;
